<template>
  <Cell title="分支题">
    <template #link>
      <div class="title">
        <span class="titleText">{{ i + 1 }}</span>
      </div>
    </template>
  </Cell>
  <div class="top">
    <p>{{ question.question }}</p>
  </div>
  <div class="top">
    <RadioGroup v-model="radioVal" class="radioGroup">
      <Radio label="1">A: {{ question.ans[0] }}</Radio>
      <Radio label="2">B: {{ question.ans[1] }}</Radio>
      <Radio label="3">C: {{ question.ans[2] }}</Radio>
    </RadioGroup>
  </div>
  <div class="top">
    <Button v-show="btnShow" type="primary" style="width: 100%" @click="handleClick">确定</Button>
  </div>
  <OverLay v-model:visible="overLayShow" :z-index="2000" :close-on-click-overlay="false">
    <div class="wrapper">
      <p class="title">您的测试结果为：</p>
      <ul>
        <li v-for="item in choose" :key="item">
          {{ item }}
        </li>
      </ul>
      <Button class="btn" type="primary" @click="handleOverlayClick">重新开始</Button>
    </div>
  </OverLay>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import { Cell, RadioGroup, Radio, Button, OverLay } from '@nutui/nutui';
import { createStepQuestion } from '../utils/question';

let getQuestion = createStepQuestion();

const i = ref(0);
const radioVal = ref('0');
const overLayShow = ref(false);
const choose = ref<Array<string>>([]);

const btnShow = computed(() => {
  return radioVal.value != '0';
});
const question = computed(() => {
  return getQuestion(i.value);
});

const handleClick = () => {
  const set = ['A', 'B', 'C'];

  choose.value.push(`第${i.value + 1}题:` + set[Number(radioVal.value) - 1]);
  if (i.value == 0) {
    switch (radioVal.value) {
      case '1':
        i.value = 1;
        break;
      case '2':
        i.value = 2;
        break;
      case '3':
        i.value = 3;
        break;
    }
  } else if (i.value == 1) {
    switch (radioVal.value) {
      case '1':
        i.value = 6;
        break;
      case '2':
        i.value = 7;
        break;
      case '3':
        overLayShow.value = true;
        break;
    }
  } else {
    overLayShow.value = true;
    return;
  }
  radioVal.value = '0';
};

const handleOverlayClick = () => {
  overLayShow.value = false;
  i.value = 0;
  radioVal.value = '0';
  getQuestion = createStepQuestion();
  choose.value = [];
};
</script>

<style lang="scss">
.top {
  margin-top: 25px;
}

.title {
  display: flex;
  align-items: baseline;

  .titleText {
    font-size: 34px;
  }
}
.wrapper {
  background-color: white;
  padding: 25px;
  border-radius: 5px;
  position: absolute;
  width: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  .title {
    margin: 0;
    font-size: 20px;
  }
  .num {
    margin: 10px 0 0;
  }
  .btn {
    float: right;
    margin-top: 25px;
    margin-left: 25px;
  }
}
</style>
